<template>
	<view class="page" @click="IsShowTools">
		<swiper class="swiper" vertical="true" :circular="IScircular" @change="SwiperChange">
			<swiper-item  class="swiperItem" v-for="(i, j) in 3" :key="j">
				<app-header bgcolor="#000" colro="#fff"></app-header>
				<view class="hd">
					<text class="cuIcon-back" @click="$pub.back"></text>
					<text></text>
				</view>

				<!-- danmu-btn 是显示弹幕按钮 -->
				<video
					class="myVideo"
					:ref="'video'+j"
					:id="'myVideo'+j"
					:src="VideoInfo.videoList[0].tempFileURL"
					:autoplay="IsAutoplay"
					@error="videoErrorCallback"
					:danmu-list="danmuList"
					enable-danmu
					playbackRate
				></video>

				<!-- 底部Tools -->
				<view class="foot-info" v-if="IsShowTool" @click.stop>
					<view class="card-hd wid1p flex just-spa-bet ali-cen ml30">
						<!-- 用户加文字信息 -->
						<view class="hd-info flex just-spa-bet ali-cen">
							<image
								:src="VideoInfo.UserInfo[0].avatar ? VideoInfo.UserInfo[0].avatar : 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg'"
								class="yicon-lg radius50p mr20"
								mode="scaleToFill"
								@click="OnPersionPublish(data_list)"
							></image>
							<view class="info">
								<view class="fo-white fo-32">{{ VideoInfo.name }}</view>
								<view class="fo-white mt10 fo-24">999万游览</view>
							</view>
						</view>
					</view>
					<view class="card-txt fo-white">{{ VideoInfo.contents }}</view>
					<!-- 点赞评论按钮 -->
					<foot-common theme="night"></foot-common>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
import AppHeader from '../../common/components/AppHeader/index.vue';
import FootCommon from './conpoment/FootCommon.vue';
import { API$SelVideoList } from '../../common/API/community.js';
export default {
	components: { AppHeader, FootCommon },
	data() {
		return {
			IsShowTool: true, // 是否显示信息栏目
			src: '',
			danmuList: [
				{
					text: '后期优化。。。。。。。',
					color: '#ff0000',
					time: 1
				},
				{
					text: '后期优化。。。。。。。。。。。。。。。。。。。。。。。。。。。',
					color: '#ff00ff',
					time: 3
				}
			],

			CurrentVideoIndex: 0, // 当前视频下标
			prePage: 0, // 上一次滑动页吗
			CurrentPage: 0, // 当前的页码
			IsAutoplay: false, // 是否自动播放
			VideoInfo: { //当前使用的视频信息
				videoList:[{
					tempFileURL:"https://7164-qddscxy-16b8d1-1303018535.tcb.qcloud.la/articleImg/HrTds9xDbEiCKNjeX5hSfF4C7BkiWYSP.mp4"
				}],
				UserInfo:[{
					avatar:"http://timg01.bdimg.com/timg?pacompress&imgtype=1&sec=1439619614&autorotate=1&di=0ee4cc18a2eedf4f106032113e52f992&quality=90&size=b870_10000&src=http%3A%2F%2Fpic.rmb.bdstatic.com%2F5394b1942567c31010feb1e70ea1163d.jpeg"
				}]
			}, 
			IScircular: false, // 是否衔接滑动

			data_list: [] ,// 视频数据(后端给的数据)
			
			videoContext0:'',
			videoContext1:'',
			videoContext2:''
		};
	},
	onReady: function(res) {
		this.videoContext0 = uni.createVideoContext('myVideo0');
		this.videoContext1 = uni.createVideoContext('myVideo1');
		this.videoContext2 = uni.createVideoContext('myVideo2');
		// this.videoContext.playbackRate(1.5);
	},
	onLoad(opt) {
		this.getVideoList();
	},
	methods: {
		videoErrorCallback: function(e) {
			this.$pub.Toast('视频错误信息');
		},
		IsShowTools() {
			this.IsShowTool = !this.IsShowTool;
		},
		SwiperChange(e) {
			this.IsShowTool = false;
			this.IScircular = true;
			let CurrentState = null;
			this.prePage = this.CurrentPage; 		 // 上一次的页数
			this.CurrentPage = e.detail.current; 	 // 当前的页数
			
			for(let i=0;i<3;i++){
				
			}
			this.videoContext0.stop()
			this.videoContext1.stop()
			this.videoContext2.stop()
			
			this.videoContext2.play()

			// this.IsAutoplay = true; // 是否自动播放
			if (this.CurrentPage === 0 && this.prePage === 2) {
				CurrentState = '我执行的是下滑';
			} else if (this.CurrentPage === 2 && this.prePage === 0) {
				CurrentState = '我执行的是上滑';
			} else if (this.CurrentPage > this.prePage) {
				CurrentState = '我执行的是下滑';
			} else {
				CurrentState = '我执行的是上滑';
			}
			if (CurrentState === '我执行的是下滑') {
				if (this.CurrentVideoIndex + 1 === this.data_list.length) {
					return this.$pub.Toast('当前已是最后一页');
				}
				this.CurrentVideoIndex++;
			} else {
				if (this.CurrentVideoIndex - 1 < 0) {
					return this.$pub.Toast('当前已是最初始页');
				}
				this.CurrentVideoIndex--;
			}
			this.VideoInfo = this.data_list[this.CurrentVideoIndex];
			this.IsShowTool = true;
		},
		/*************************************************数据处理部分***********************************************/
		async getVideoList() {
			let SelJson = {
				pageSize: 5,
				pageNum: 0,
				UserId: this.$pub.getStorageSync('UserInfo')._id
			};
			let { code, msg, data } = await API$SelVideoList(SelJson);
			// console.log(code,msg,data)
			if (code === 200) {
				this.data_list = data;
				this.VideoInfo = this.data_list[0];
			}
		}
	}
};
</script>

<style lang="less" scoped>
// 滑动框架
.swiper {
	height: 100vh;
	width: 100%;
}
.swiperItem{
	position: relative;
}
.page {
	background-color: #000;
	height: calc(100vh);
}
.hd {
	padding: 40rpx 20rpx;
	height: 110rpx;
	line-height: 110rpx;
	box-sizing: border-box;
	background-color: #000;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 40rpx;
	.hd-title {
		width: 560rpx;
	}
}
.myVideo {
	width: 100%;
	position: absolute;
	top: calc(50%);
	transform: translate3d(0, -50%, 0);
}

.card-hd {
	position: absolute;
	top: 73%;
}
.card-txt {
	position: absolute;
	top: 81%;
	margin-left: 60rpx;
}
</style>
